<!DOCTYPE html>
<html>
    <head>
        <style>
            canvas{
                width: 90vh;
                height: 90vh;
            }
        </style>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <canvas width="1000" height="1000"></canvas>
    </body>
    <script>
        var canvas = $("canvas")[0].getContext("2d");
        function drawLine(x1,y1,x2,y2){
            canvas.moveTo(x1,y1);
            canvas.lineTo(x2,y2);
            canvas.stroke();
        }
        var people =[];
        function distance(a,b){
            return Math.sqrt((a.x-b.x)*(a.x-b.x)+(a.y-b.y)*(a.y-b.y));
        }
        var holeMaxX=8;
        var holeMaxY=40;
        function runInThehole(){
            for(let i in people){
                let peo = people[i];
                peo.x+=peo.vx;
                peo.y+=peo.vy;
                if(peo.vy<=1+Math.random()*0.5) peo.vy+=0.5;//驱动力
                for(let ii in people){
                    if(i==ii) continue;
                    peoI = people[ii];
                    if(distance(peo,peoI) <2){//发生碰撞
                            peo.vx=(peoI.vx<0?1:-1)*Math.max(Math.abs(peo.vx),0.5);
                            peo.vy=0;
                    }
                }
                if(peo.x<=1){
                    peo.vx=0.5;
                }
                if(peo.x>=7){
                    peo.vx=-0.5;
                }

            }
        }
        function displayTheHole(){
            canvas.fillStyle = "white";
            canvas.fillRect(0,0,1000,1000);
            let lefx = 200;
            let rgtx = 400;
            let upy = 20;
            let downy = 500;
            let wid = rgtx-lefx;let hei = downy-upy;
            canvas.fillStyle = "black";
            for(let i in people){
                canvas.beginPath();
                canvas.arc(lefx+wid*people[i].x/holeMaxX,upy+wid*people[i].y/holeMaxX,wid*1/holeMaxX,0,2*Math.PI);
                canvas.fill();
            }
            canvas.beginPath();
            drawLine(lefx,upy,lefx,downy);
            drawLine(rgtx,upy,rgtx,downy);
        }
        function newPeo(x,y,vx,vy){
            people.push({
                x:x,
                y:y,
                vx:vx,
                vy:vy
            });
        }
        for(let i=0;i<6;i++){
            let a;//测试xy
            let undone = true;
            while(undone){
                a={x:0+Math.random()*8,y:0+Math.random()*4}
                undone = false;
                for(let i in people){
                    if(distance(a,people[i]) <2 || a.x<=1 || a.x>=holeMaxX-1) {
                        undone = true;break;
                    }
                }
            }
            newPeo(a.x,a.y,-0.5+Math.random(),-0.5+Math.random());
        }
        setInterval("runInThehole();displayTheHole();   ",100)
    </script>
</html>